<template>
  <div class="app-container">

    <!--查询表单-->
  <div class="search-div">
        <el-form label-width="70px" size="small">
          <el-row>
            <el-col :span="24">
              <el-form-item label="角色名称">
                <el-input style="width: 100%" v-model="searchObj.roleName" placeholder="角色名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="display:flex">
            <el-button type="primary" icon="el-icon-search" size="mini"  @click="fetchData()">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetData">重置</el-button>
          </el-row>
        </el-form>
  </div>


    <!-- 表格 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      stripe
      border
      style="width: 100%;margin-top: 10px;"
      @selection-change="handleSelectionChange">

      <el-table-column type="selection"/>

      <el-table-column
        label="序号"
        width="70"
        align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="roleName" label="角色名称" />
      <el-table-column prop="roleCode" label="角色编码" />
      <el-table-column prop="createTime" label="创建时间" width="160"/>

      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" 
              size="mini" 
              @click="edit(scope.row.id)" title="修改"/>
          <el-button type="danger" icon="el-icon-delete" 
              size="mini" 
              @click="removeDataById(scope.row.id)" title="删除"/>

          <el-button type="warning" icon="el-icon-baseball" size="mini" 
              @click="showAssignAuth(scope.row)" title="分配权限"/>
        </template>
      </el-table-column>
    </el-table>
    <!-- 工具条 -->
  <div class="tools-div">
    <el-button type="success" icon="el-icon-plus" 
        size="mini" @click="add" 
        :disabled="$hasBP('bnt.sysRole.add')  === false">添 加</el-button>
    <el-button class="btn-add" size="mini" @click="batchRemove()" >批量删除</el-button>
  </div>
      <!-- 分页组件 
      current-change封装功能：点击某页，把页码数传递到方法里面
      -->
  <el-pagination
    :current-page="page"
    :total="total"
    :page-size="limit"
    style="padding: 30px 0; text-align: center;"
    layout="total, prev, pager, next, jumper"
    @current-change="fetchData"
  />
  <!-- 添加或修改的表单 -->
  <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%" >
        <el-form ref="dataForm" :model="sysRole" label-width="150px" size="small" style="padding-right: 40px;">
          <el-form-item label="角色名称">
            <el-input v-model="sysRole.roleName"/>
          </el-form-item>
          <el-form-item label="角色编码">
            <el-input v-model="sysRole.roleCode"/>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="small" icon="el-icon-refresh-right">取 消</el-button>
          <el-button type="primary" icon="el-icon-check" @click="saveOrUpdate()" size="small">确 定</el-button>
        </span>
  </el-dialog>
  </div>
</template>

<script>
//引入定义接口js文件
//放到export default外面
import role_api from '@/api/system/sysRole.js'

const defaultForm = {
  id: '',
  roleName: '',
  roleCode: ''
}

export default {
  //代码固定结构
  data() { //1 定义变量和初始值
    return {

      //添加修改弹框设置，false不弹框，true弹框
      dialogVisible: false,

      listLoading:true, // 数据是否正在加载
    
      list: [], // 角色列表
      total: 0, // 总记录数
      page: 1, // 页码
      limit: 2, // 每页记录数
      //v-model="searchObj.roleName"
      searchObj: {},// 查询条件
      sysRole:{},
      dataArray:[] //选中复选框内容
    }
  },
  created() { //2 页面渲染之前执行
    //调用后端接口得到数据
    this.fetchData()
  },
  methods:{ //3 方法
    //分配菜单权限
    showAssignAuth(row) {
      this.$router.push('/system/assignAuth?id='+row.id+'&roleName='+row.roleName);
    },
    //批量删除
    batchRemove() {
      //idList  [1,2,3]
      //this.dataArray遍历
      var idList = []
      for(var i=0;i<this.dataArray.length;i++) {
        var obj = this.dataArray[i]
        var id = obj.id
        //放到数组里面
        idList.push(id)  //[1,2,3]
      }
      role_api.batchRemove(idList)
        .then(response => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          //刷新页面
          this.fetchData()
        })
    },
    //handleSelectionChange
    //复选框发生变化，
    handleSelectionChange(selection) {
      //selection传递选中复选框内容
      this.dataArray = selection
      console.log(this.dataArray)
    },
    //修改弹框数据显示
    edit(id) {
      this.dialogVisible = true
      role_api.getRole(id)
        .then(response => {
          this.sysRole = response.data
        })
    },
    //弹出框
    add() {
      this.dialogVisible = true
      this.sysRole = {} //清空表单
    },
    //添加
    saveRole() {
      role_api.addRole(this.sysRole)
        .then(response => {
          //提示信息
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          //关闭弹框
          this.dialogVisible = false
          //刷新页面
          this.fetchData()
        })
    },
    update() {
      role_api.updateRole(this.sysRole)
        .then(response => {
          //提示信息
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
          //关闭弹框
          this.dialogVisible = false
          //刷新页面
          this.fetchData()
        })
    },
    saveOrUpdate() {
      //role对象没有id，添加
      //有id，修改
      if(!this.sysRole.id) {
        this.saveRole()
      } else {
        this.update()
      }
    },
    //根据id删除
    removeDataById(id) {
      this.$confirm('此操作将永久删除该角色信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {  //点击确定 调用then方法
        //调用接口删除
        role_api.deleteRole(id)
        .then(response => {
          //提示成功
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          //刷新页面
          this.fetchData()
        })
      }) 
    },
    //重置方法
    resetData() {
      //清空
      this.searchObj = {}
      //查询所有记录
      this.fetchData()
    },
    //条件分页查询方法
    //pageNum=1 默认值是1
    fetchData(pageNum=1) {

      this.page = pageNum

      this.listLoading = false
      //ajax请求得到列表数据
      console.log('fetchData....')
      //调用方法  getRolePageCondition(current,limit,seachObj)
      role_api.getRolePageCondition(this.page,this.limit,this.searchObj)
                  .then(response => { //response 接收接口返回数据
                    this.list = response.data.records //数据数组
                    this.total = response.data.total  //总记录数
                    // console.log(this.list)
                    // console.log(this.total)
                  }) //调用接口成功，调用then方法
                  //.catch() //调用失败调用catch方法
    }
  }
}
</script>